<style>
* {box-sizing: border-box}

/* BOTTOM NAVIGATION MENU */

/* Style the tab */
/* BOTTOM NAVIGATION MENU */
#nav-menu-bottom {
	width: 100%;
	font-weight: normal;
	background-color: #4c4c4b;
	color: #b8b6b5;
	float: none;
    border-top: 3px solid #075eea;
	outline: none;
	cursor: pointer;
	font-size: 15px;
	margin: 0 0 0 0;
	display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
	bottom: 0px;
	position: fixed;
	z-index: 10001;
	box-shadow: 0px -16px 16px -8px rgb(0, 0, 0, 0.5);
}

/* Style the buttons inside the tab */
.nav-menu-bottom-btn {
	width: 25%;
	color: #b8b6b5;
	background-color: #4c4c4b;
	text-align: center;
	float: none;
	cursor: pointer;
	transition: 0.3s;
	font-size: 11px;
	font-weight: normal;
	border: none;
	/* border-bottom: 5px solid #4c4c4b; */
    padding: 10px 5px;
	text-decoration: none;
	transition: top 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

/* Change background color of buttons on hover */
.nav-menu-bottom-btn:hover {
	font-weight: normal;
	color: #e5e3e3;
	background-color: #4c4c4b;
	text-decoration: none;
}

.nav-menu-bottom-btn.active {
	color: #eabd31;
	/* border-bottom: 5px solid #eabd31; */
	text-decoration: none;
}

/* Style the buttons inside the tab */
.nav-menu-bottom-btn-games {
	width: 25%;
	color: #b8b6b5;
	background-color: #333;
	text-align: center;
	float: none;
	cursor: pointer;
	transition: 0.3s;
	font-size: 11px;
	font-weight: normal;
	border: none;
	/* border-bottom: 5px solid #4c4c4b; */
    padding: 10px 5px;
	text-decoration: none;
	transition: top 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

/* Change background color of buttons on hover */
.nav-menu-bottom-btn-games:hover {
	font-weight: normal;
	color: #e5e3e3;
	background-color: #333;
	text-decoration: none;
}

.nav-menu-bottom-btn-games.active {
	color: #eabd31;
	/* border-bottom: 5px solid #eabd31; */
	text-decoration: none;
}

.nav-menu-sports {
    width: 80px;
    background: #333;
    color: #b8b6b5;
    text-align: center;
    font-size: 11px;
    border: none;
    /* border: 1px solid #b8b6b5; */
    border-radius: 0 50% 50% 0;
	padding-left: 0px;
}

.nav-menu-sports.active {
    background: #075eea;
	color: #fbfafa;
}

.nav-menu-sports:hover {
	font-weight: normal;
    color: #eabd31;
	background: #075eea;
	text-decoration: none;
}

.nav-menu-casino {
    width: 80px;
    background: #b8b6b5;
    color: #333;
    text-align: center;
    font-size: 11px;
    border: none;
    /* border: 1px solid #b8b6b5; */
    border-radius: 50% 0% 0 50%;
	padding-right: 0px;
}

.nav-menu-casino.active {
    background: #b8b6b5;
    color: #fbfafa;
}

.nav-menu-casino:hover {
    background: #b8b6b5;
    color: #075eea;
	text-decoration: none;
}

.menu-group-sports {
    width: 100%;
    display: flex;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-group-games {
    width: 100%;
    display: flex;
	transition: transform 0.25s ease, opacity 0.25s ease;
	background: #333;
}

.menu-group-games.hidden {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

.menu-group.slide-in {
    opacity: 1;
    transform: translateX(0);
}

.hidden {
    display: none;
	background-color: green;
}

.material-icons {
	font-size: 30px;
    padding: 2px 0px;
}

.material-icons.active {
	font-size: 30px;
	background-color: #333;
    border-radius: 10px;
    padding: 2px 8px;
	color: #eabd31;
}

.material-icons.active-games {
	font-size: 30px;
	background-color: #4c4c4b;
    border-radius: 10px;
    padding: 2px 8px;
	color: #eabd31;
}


</style>

